<template>
  <div class="wap">
    <!-- -->
    <div class="login">
      <div class="user">
        <span>输入账号:</span>
        <input :class="usersty ? 'stress':''"
               type="text"
               v-model="user"
               @click="inputClick(0)"
               placeholder="5~12位数字、字母(大写或小写)或混合">
      </div>
      <div class="pwd">
        <span>输入密码:</span>
        <input :class="pwdsty ? 'stress':''"
               :type="show1 ? 'password':'text'"
               v-model="pwd"
               @click="inputClick(1)"
               placeholder="6~12位包含字母(大写或小写)和数字">
        <img src="/imgs/yanjing.png"
             alt=""
             @click="yanjing1">
      </div>

      <div class="head_img">
        <span>选择您的头像:</span>
        <div>
          <el-upload ref="fileList"
                     v-model="fileList"
                     :action="`http://localhost:3000/api/upload?username=${user}`"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
                     :limit="1"
                     name="files"
                     :auto-upload="false">
            <!-- <el-button type="primary"> -->
            <el-icon>
              <Plus />
            </el-icon>
            <!-- </el-button> -->
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="" />
          </el-dialog>

        </div>
      </div>
      <div>
        <button class="login_but"
                @click="register">确定修改</button>
        <button class="register_but"
                @click="back_login">返回</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from '@/axios'
import { useRouter } from 'vue-router'
// import bus from '@/bus'
// import { useCounterStore } from '@/stores/ceshi'
import { ElMessage, ElLoading } from 'element-plus'
export default {
  setup() {
    // const { proxy } = getCurrentInstance()
    // const store = useCounterStore()
    //路由跳转
    const router = useRouter()
    //用户名
    let user = ref('')
    const userName = localStorage.getItem('username')
    //密码
    let pwd = ref('')
    const pwdName = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,12}$/

    //眼睛
    let show1 = ref(true)

    //错误提示语
    let useMsg = function (a, b) {
      return ElMessage({
        message: a,
        type: b,
        offset: 150,
        duration: 5000,
        center: true
      })
    }
    //账号错误输入框提示
    let usersty = ref(false)
    //密码错误输入框提示
    let pwdsty = ref(false)

    //点击输入框去除提示
    const inputClick = (a) => {
      if (a == 0) {
        usersty.value = false
      } else if (a == 1) {
        pwdsty.value = false
      }
    }
    //点击查看密码
    const yanjing1 = () => {
      if (show1.value) {
        show1.value = false
        if (!show1.value) {
          setTimeout(() => {
            show1.value = true
          }, 3000)
        }
      }
    }

    //头像上传
    let fileList = ref()
    let dialogImageUrl = ref('')
    let dialogVisible = ref(false)
    let handleRemove = (file, fileList) => {
      console.log(file, fileList)
      // 可以在这里添加额外的删除逻辑，比如从服务器删除文件等
    }
    let handlePictureCardPreview = (file) => {
      dialogImageUrl.value = file.url
      dialogVisible.value = true
    }
    onMounted(() => {})
    onUnmounted(() => {})
    //返回
    const back_login = () => {
      // console.log('jhfjhdrtu')
      router.go(-1)
    }
    //传送数据
    const register = () => {
      // console.log(fileList.value)

      if (userName == user.value) {
        if (pwdName.test(pwd.value)) {
          axios
            .post('/xiuxi', {
              username: user.value,
              password: pwd.value
            })
            .then((d) => {
              if (d == '修改成功') {
                usersty.value = false
                pwdsty.value = false
                fileList.value.submit()
                const loading = ElLoading.service({
                  lock: true,
                  text: '修改中，请稍等',
                  background: 'rgba(0, 0, 0, 0.7)'
                })
                setTimeout(() => {
                  loading.close()
                  router.go(-1)
                  setTimeout(() => {
                    location.reload()
                  }, 10)
                  //清空输入框
                  user.value = ''
                  pwd.value = ''
                  fileList.value.handleRemove(fileList.value)
                }, 2000)
              } else if (d == '用户不存在') {
                usersty.value = true
                useMsg('账号错误,请重新输入', 'error')
                user.value = ''
              } else {
                pwdsty.value = true
                // useMsg(d)
                useMsg('密码错误,请重新输入', 'error')
              }
            })
            .catch((err) => console.log(err))
        } else {
          pwdsty.value = true
          useMsg('密码错误,请重新输入', 'error')
        }
      } else {
        usersty.value = true
        useMsg('账号错误,请重新输入', 'error')
      }
    }

    return {
      user,
      pwd,
      back_login,
      register,
      yanjing1,
      show1,
      useMsg,
      usersty,
      pwdsty,
      inputClick,
      fileList,
      dialogImageUrl,
      dialogVisible,
      handlePictureCardPreview,
      handleRemove
    }
  }
}
</script>
<style lang="less" scoped>
.wap {
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  background: url(/imgs/000.gif) no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  .login {
    width: 800px;
    background-image: linear-gradient(
      to bottom,
      rgba(249, 239, 241, 0.8),
      rgba(255, 255, 255, 0.8)
    );
    border: 1px solid #ccc;
    border-radius: 10% 25%;
    border-bottom: #cdbf62 8px solid;
    border-left: #cdbf62 8px solid;
    border-right: #cdbf62 8px dashed;
    border-top: #cdbf62 8px dashed;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .user {
      width: 450px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      span {
        width: 90px;
        text-align: center;
      }
    }
    .sex {
      width: 450px;
      height: 50px;
      display: flex;

      // justify-content: space-between;
      align-items: center;
      span {
        width: 90px;
        text-align: center;
      }
    }
    input {
      width: 360px;
      border: 1px solid #ccc;
      height: 30px;
      border-radius: 5px;
    }
    input:focus {
      border: 1px solid #333;
      outline: none; //这个可以把原来的线去掉
    }
    .stress {
      width: 360px;
      border: 2px solid #e90505;
      height: 30px;
      border-radius: 5px;
    }
    .pwd {
      width: 450px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin: 20px 0 0 0;
      margin: 10px 0;
      position: relative;
      span {
        width: 90px;
        text-align: center;
      }
      img {
        width: 25px;
        height: 20px;
        position: absolute;
        right: 5px;
        top: 15px;
      }
    }
    .head_img {
      width: 450px;
      display: flex;
      margin: 10px 0;
      span {
        margin-right: 20px;
      }
    }
    button {
      width: 100px;
      height: 30px;
      margin: 0 15px;
      cursor: pointer;
    }
    .login_but {
      background-color: aqua;
    }
  }
}
</style>